import React from 'react';
import { Layout, Menu, Input, Button, Space } from 'antd';
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { Header: AntHeader } = Layout;
const { Search } = Input;

const Header: React.FC = () => {
  return (
    <AntHeader style={{ position: 'fixed', zIndex: 1, width: '100%', background: '#fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Link to="/" style={{ marginRight: 24 }}>
            <img src="/BHEIHHEDDCFHG-JJs97r0qoI.png" alt="AI News" style={{ height: 40, objectFit: 'contain' }} />
          </Link>
          <Menu mode="horizontal" defaultSelectedKeys={['home']}>
            <Menu.Item key="home">
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="tech">
              <Link to="/tech">技术前沿</Link>
            </Menu.Item>
            <Menu.Item key="app">
              <Link to="/app">AI应用场</Link>
            </Menu.Item>
            <Menu.Item key="insight">
              <Link to="/insight">发展洞察</Link>
            </Menu.Item>
            <Menu.Item key="search">
              <Link to="/search">搜索</Link>
            </Menu.Item>
          </Menu>
        </div>
        
        <Space size="middle">
          <Search
            placeholder="搜索AI资讯"
            style={{ width: 200 }}
            onSearch={value => console.log(value)}
          />
          <Button type="primary" icon={<UserOutlined />}>
            登录/注册
          </Button>
        </Space>
      </div>
    </AntHeader>
  );
};

export default Header; 